<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>联系人月度统计</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f5f9f1;
      margin: 0;
      padding: 0;
    }

    h2 {
      color: #2d5d2c;
      margin-top: 40px;
      font-size: 28px;
      letter-spacing: 1px;
      text-align: center;
    }

    #chart {
        width: 900px;
        height: 550px;
        margin: 40px auto;
        background-color: #ffffff;
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 8px 20px rgba(0, 100, 0, 0.08);
    }

    .custom-tooltip {
      background-color: rgba(255, 255, 255, 0.95);
      border: 1px solid #d6ead6;
      border-radius: 8px;
      padding: 10px;
      color: #3a603a;
      font-weight: 500;
    }
  </style>
</head>
<body>

<h2 style="text-align: center;">🌳 联系人新增趋势分析</h2>
<div id="chart"></div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
  /*<![CDATA[*/
  const months = [[${months}]];
  const counts = [[${counts}]];

  const chart = echarts.init(document.getElementById('chart'));

  // 清新自然主题配色
  const naturalColors = ['#88c9a1', '#6dd47e', '#42b983', '#3a9d6b', '#2f805a'];

  const option = {
      tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.95)',
          borderColor: '#d6ead6',
          textStyle: {
              color: '#3a603a'
          },
          formatter: function(params) {
              return `<div style="padding: 12px; border-radius: 6px; background: #fff; border: 1px solid #d6ead6">
                      <div style="margin-bottom: 8px; font-weight: bold">${params[0].name}</div>
                      <div>${params[0].marker} 新增数量：<span style="color: #42b983">${params[0].value}</span></div>
                      </div>`;
          }
      },
      xAxis: {
          type: 'category',
          data: months,
          axisLabel: {
              rotate: 30,
              color: '#3a603a',
              fontSize: 13
          },
          axisLine: {
              lineStyle: {
                  color: '#d6ead6'
              }
          },
          splitLine: {
              lineStyle: {
                  color: '#e8f3ec',
                  type: 'dashed'
              }
          }
      },
      yAxis: {
          type: 'value',
          axisLabel: {
              color: '#3a603a',
              fontSize: 12
          },
          splitLine: {
              lineStyle: {
                  color: '#e8f3ec',
                  type: 'dashed'
              }
          }
      },
      grid: {
          left: '10%',
          right: '8%',
          bottom: '15%',
          top: '12%'
      },
      series: [{
          name: '新增联系人数量',
          type: 'line',
          data: counts,
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
              color: '#42b983',
              borderRadius: 4
          },
          lineStyle: {
              color: '#42b983',
              width: 3
          },
          areaStyle: {
              color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                      {offset: 0, color: 'rgba(66, 185, 131, 0.3)'},
                      {offset: 1, color: 'rgba(66, 185, 131, 0)'}
                  ]
              }
          },
          label: {
              show: true,
              position: 'top',
              color: '#42b983',
              fontWeight: 'bold',
              fontSize: 14,
              formatter: '{c}'
          }
      }]
  };

  chart.setOption(option);

  // 响应式调整
  window.addEventListener('resize', function() {
    chart.resize();
  });
  /*]]>*/
</script>

</body>
</html>